<template>
	<view class="back">
		<view style="height: 13%;">
			<view>
				<image style="width: 80rpx;height:80rpx;margin-left: 50rpx;position: relative;top:95rpx;"
					class="shrink-0 image_3"
					src="https://ide.code.fun/api/image?token=658020ebfcfbac001139fd4f&name=3b8f508d119d287a8dfc01e289624070.png" />
			</view>
			<view class="div2">
				<view class="div2-2"
					style="display: flex; align-items: center; justify-content: center;color: #636363;margin-top: 15rpx;"
					@click="goSearch()">
					<view style="float: left;"><img style="width: 40rpx;height: 40rpx;margin-left: -90rpx;"
							src="../../static/dumbbell.png" alt=""></view>
					<view style="float: left; margin-left: 10rpx;letter-spacing: 2px;font-size: 28rpx;">
						<text style="font-weight: bold;">追云健身俱乐部</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 课程状态 待训练 进行中 已完成  -->
		<view
			style="width: 100vw;height: 50vh;margin-top: 30rpx;border-radius: 70rpx 70rpx 0rpx 0rpx;padding-bottom:5vh ;font-size: 30rpx;">
			<view
				style="border-radius: 25rpx 25rpx 25rpx 25rpx;margin: 0 auto;width: 95%;height: 60px;background-color: #6EE7F0;position: relative;">
				<view class="dao" style="font-size: 40rpx;margin-left:110rpx;" v-for="(item,index) in list">
					<!-- 当前选择的状态 -->
					<view class="dao-2" v-if="selectStatus==index+1">
						<text>{{item.name}}</text>
						<view class="xian"></view>
					</view>
					<!-- 所有课程状态 -->
					<view class="dao-3" v-else @click="changeSelect(item)">
						<text>{{item.name}}</text>
					</view>
				</view>
				<text
					style="display: block;background-color: #fff;width:1px;height: 38px;position: absolute;top: 12px;left: 204px;"></text>
			</view>
			<view style="overflow: auto;height: 75vh;width: 100%;">
				<!-- 选择时间 -->
				<view style="width: 100%;height: 10vh;">
					<!-- 已完成页面时间 -->
					<view class="dao-1" v-if="selectStatus==2">
						<view class="dao-1-1">
							<input type="text" v-model="year" @click="drugNameShow = true"
								style="width: 120px;height: 30px; background-color: rgb(255, 255, 255);border-radius :20rpx;"
								disabled> <text style="margin-left: 10rpx;">年</text>
							<u-picker :show="drugNameShow" :columns="drugNameColumns" @confirm="drugNameConfirm"
								@cancel="closeShow" ref="uPicker"></u-picker>
							<!-- <liu-data-select elementId="data-select2" :dataList="dataList" @change="change1">
									<input class="btn-info1" id="data-select2" placeholder="请选择年份" v-model="selectYear" border="none" disabled />
							</liu-data-select> -->
						</view>
					</view>
					<view class="dao-1" v-if="selectStatus==2">
						<view class="dao-1-1">
							<input type="text" v-model="month" @click="drugNameShows = true"
								style="width: 120px;height: 30px; background-color: rgb(255, 255, 255);border-radius :20rpx;"
								disabled><text style="margin-left: 10rpx;">月</text>
							<u-picker :show="drugNameShows" :columns="drugNameColumnss" @confirm="drugNameConfirms"
								@cancel="closeShow" ref="uPicker"></u-picker>
						</view>
					</view>
					<view class="refresh-icon" @click="refreshData" v-if="selectStatus==2">
						<image :src="'http://101.43.223.224:8765/image/getImageById?id=' + 6558"
							style="width: 100%;height: 100%;"></image>
					</view>
					<view style="float: left;margin-top: 27rpx" v-if="selectStatus==2">
						<text style="font-size: 25rpx;margin-left: 130rpx;">总课时{{ courseList.length }}节</text><!-- 后台获取数据 -->
					</view>
					<view v-if="selectStatus==1">
						<!-- 待完成页面选择日期 -->
						<view class="week-display"
							style="background-color: white;color: black;padding-top:20rpx;border-radius:  25rpx 25rpx 25rpx 25rpx;">
							<view class="week-item" v-for="(day, index) in week" :key="index">
								<view><text>{{ day }}</text>
								<!-- 判断这一天是否满课 满课红点；不满课蓝点 -->
								<view v-for="(cla,ind) in classes" :key="ind">
									<view class="selected-dot2" v-if="ind === index && isDayFull(cla)"></view><!-- 红点 -->
									<view class="selected-dot3" v-else-if="ind === index && isDayFulls(cla)"></view><!-- 蓝点 -->
								</view>
								</view>
								<view class="week-item-d1"
									v-if="formatDate(dateList[index])==dayOfMonth||daySelect==formatDate(dateList[index])"
									@click="changeDay(index)">
									<text>{{ formatDate(dateList[index]) }}</text> <!-- 添加标记元素 -->
									<view class="selected-dot"></view> <!-- 选中状态的打点 -->
								</view>
								<view style="margin-top: 1vh;" v-else @click="changeDay(index)">
									<text>{{ formatDate(dateList[index])}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 卡片 -->
				<view @tap="openTrain(item)"
					style="border-radius: 25rpx 25rpx 25rpx 25rpx;width: 90%;background-color: #fff;margin: 0 auto;box-sizing: border-box;box-shadow: 0 2px 10px #dfdfdf;margin-bottom: 18px;margin-top: 10px;"
					v-for="item in courseList">
					<view
						style="height: 60rpx;background-color: aliceblue;width: 100%;border-radius: 25rpx 25rpx 0rpx 0rpx;padding-top: 20rpx;">
						<view style="float: left;margin-left: 220rpx;">{{item.reservationTime}}
							{{ getWeekday(item.reservationTime) }}
						</view>
						<!-- 齿轮图标 -->
						<img src="../../static/chilun.png" style="width: 30rpx;height: 30rpx;margin-left: 180rpx;"
							alt="">
					</view>
					<view
						style="width: 85vw;margin: 0 auto;height: 240rpx;padding: 5px;box-sizing: border-box;margin-top: 10rpx;">
						<view style="display: flex; align-items: center;">
							<u-icon :style="{ display: 'inline-block', marginRight: '10px' }" name="calendar"
								size="35rpx" color="#000000"></u-icon>
							{{ item.fitnessPlanName }}
						</view>
						<view style="width: 160rpx;height: 160rpx;float: left;">
							<image
								style="position: relative;border-radius: 25rpx 25rpx 25rpx 25rpx;border-radius: 100rpx"
								class="imagg"
								:src="'http://101.43.223.224:8765/image/getImageById?id=' + item.memberUserPhoto">
							</image>
						</view>
						<view style="font-size: 26rpx;float: left;color: #5C5C5C;width: 260px;">

							<view style="margin-top:10rpx;height: 35rpx;">
								<view style="float: left;"><uni-icons type="person" size="20"></uni-icons><span
										style="color: rgb(157, 157, 157);">学员姓名：</span><span
										style="color: rgb(157, 157, 157);font-size: 25rpx;">{{item.memberUserRealName}}</span>
								</view>
							</view>

							<view style="height: 35rpx;margin-top: 10rpx;">
								<view style="float: left;"><uni-icons type="calendar" size="20"></uni-icons><span
										style="color: rgb(157, 157, 157);">训练时间：</span><span
										style="color: rgb(157, 157, 157);font-size: 25rpx;">{{item.reservationTime}}
										|</span><span
										style="margin-left:4px; color: rgb(157, 157, 157);font-size: 25rpx;">{{item.trainingTime}}</span>
								</view>
								<!-- <view style="float: left;" v-if="item.reservationStatus == 0"><span style="color: rgb(157, 157, 157);">训练时间：</span><span style="color: rgb(157, 157, 157);font-size: 25rpx;">待预约</span></view> -->
							</view>
							<view style="margin-top:10rpx;height: 35rpx;">
								<view style="float: left;" v-if="item.reservationStatus == 1">
									<view style="float: left;"><uni-icons type="paperplane" size="20"></uni-icons><span
											style="color: rgb(157, 157, 157);">联系电话：</span><span
											style="color: rgb(157, 157, 157);font-size: 25rpx;">17777777777</span>
									</view>
								</view>
							</view>
							<view style="height: 50rpx; float: right;margin-top: -15%;">
								<view style="width: 140rpx;">
									<view
										style="color:#fff;height: 50rpx; border-radius: 10rpx; background-color: rgb(60, 156, 255); display: flex; align-items: center; justify-content: center;"
										v-if="item.reservationStatus==0" @click.stop="openReservationpages(item)">
										<text style="letter-spacing: 2px;">&nbsp;预约
										</text>
									</view>
									<view
										style="position: relative;top: 70rpx;color:#fff;height: 50rpx; border-radius: 10rpx; background-color: #75E9F1; display: flex; align-items: center; justify-content: center;"
										v-if="item.reservationStatus==1">
										<img style="width: 30rpx;height: 30rpx;" src="../../static/qipao.png"
											alt=""><text style="letter-spacing: 2px;">&nbsp;GO!</text>
									</view>
									<view
										style="position: relative;top: 70rpx;color:#fff;height: 50rpx; border-radius: 10rpx; background-color: #E9E9E9; display: flex; align-items: center; justify-content: center;"
										v-if="item.reservationStatus==2">
										<img style="width: 30rpx;height: 30rpx;" src="../../static/eye.png" alt=""><text
											style="letter-spacing: 2px;color: #808080;">&nbsp;查看
										</text>
									</view>
									<view @click="submit(item.memberUserRealName)"
										style="position: relative;top: 70rpx;color:#fff;height: 50rpx; border-radius: 10rpx; background-color: #75E9F1; display: flex; align-items: center; justify-content: center;"
										v-if="item.reservationStatus==3">
										<img style="width: 30rpx;height: 30rpx;" src="../../static/upload.png" alt="">
										<text style="letter-spacing: 2px;">&nbsp;上传</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 日期数组
				dateList: [],
				current: 0,
				selectStatus: 1,
				genshin: true,
				dayOfMonth: 0,
				daySelect: 0,
				today: '',
				// 星期数组
				week: ["一", "二", "三", "四", "五", "六", "日"],
				courseList: [],
				list: [{
						isClick: 1,
						name: '待上课'
					},
					{
						isClick: 2,
						name: '已上课'
					},
				],
				venuename: uni.getStorageSync('venuename'),
				dataList: [],
				drugNameColumns: [
					[]
				],
				//默认2023年
				year: '2023',
				drugNameShow: false,
				drugNameShows: false,
				selectYear: '',
				selectMonth: '',
				// 月份
				month: '12',
				// 月份列表数据
				drugNameColumnss: [
					['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
				],
				//查询课程数据
				classes:[]
			}
		},
		onLoad() {
			this.newdate()
			this.calculateDates()
			this.getSelectYear()
			this.getReservation()
		},
		onShow() {
			this.getReservation()
		},
		methods: {
			isDayFull(cla) {
			      return cla.courseSize >= cla.timeSize;
			},
			isDayFulls(cla) {
			      return cla.courseSize < cla.timeSize && cla.courseSize > 0;
			},
			isDayFulles(cla) {
			      return cla.courseSize = 0;
			},
			//查询日期课程状态
			getQueryCourse(dateStrings){
				uni.request({
					url: this.URL + 'vipPlan/getCount',
					method: 'GET',
					data: {
						invitationCode: uni.getStorageSync("teacherinfo").coachCode,
						coachId: uni.getStorageSync("teacherinfo").id,
						daiXunLianDate: dateStrings
					},
					success: (res) => {
						this.classes = res.data.data.data
					}
				})
			},
			getWeekday(dateString) {
				const date = new Date(dateString);
				const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
				const weekdayIndex = date.getDay();
				return ' ' + weekdays[weekdayIndex];
			},
			newdate() {
				const date = new Date;
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var day = date.getDate();
				// 格式化月份和日期，确保为两位数
				if (month < 10) {
					month = '0' + month;
				}
				if (day < 10) {
					day = '0' + day;
				}
				this.today = year + '-' + month + '-' + day;
			},
			//上传按钮
			submit(memberUserRealName) {
				uni.showModal({
					title: '提示：',
					content: '请确认是否要提交' + memberUserRealName + '的上课记录',
					success: function(res) {
						if (res.confirm) {
							//确认走添加
						} else if (res.cancel) {
							//取消隐藏对话框
						}
					}
				})
			},
			changeDay(index) {
				// 获取到的时间
				const selectedDate = new Date(this.dateList[index]);
				// 获取到的日
				const dayOfMonth = selectedDate.getDate();
				// 对时间进行处理
				var year = selectedDate.getFullYear();
				var month = selectedDate.getMonth() + 1;
				var day = selectedDate.getDate();
				// 格式化月份和日期，确保为两位数
				if (month < 10) {
					month = '0' + month;
				}
				if (day < 10) {
					day = '0' + day;
				}
				this.today = year + '-' + month + '-' + day;
				// 下标
				this.daySelect = dayOfMonth;
				this.getReservation()
			},
			changeSelect(item) {
				this.selectStatus = item.isClick
				this.getReservation()
			},
			change(index) {
				this.current = index;
			},
			calculateDates() {
				const today = new Date();
				this.dayOfMonth = today.getDate();
				console.log('Today is the', this.dayOfMonth, 'th day of the month');
				const currentDay = today.getDay(); // 获取当前星期几，0代表星期日，1代表星期一，以此类推
				const startDate = new Date(today);
				startDate.setDate(today.getDate() - currentDay); // 将日期调整到本周的星期日
				for (let i = 1; i < 8; i++) {
					const date = new Date(startDate);
					date.setDate(startDate.getDate() + i);
					this.dateList.push(date);
				}
				//查询当前星期课程状态
				var dateStrings = this.dateList.map(date => date.toISOString());
				this.getQueryCourse(dateStrings) 
				
			},
			formatDate(date) {
				if (!date) return "";
				
				return date.getDate();
			},
			// 重置按钮
			refreshData() {
				this.year = ""
				this.month = ""
				this.selectYear = ""
				this.selectMonth = ""
				this.getReservation()
			},
			// 取消按钮
			closeShow() {
				this.drugNameShow = false
				this.drugNameShows = false

			},
			// 查询时间
			getSelectYear() {
				uni.request({
					url: this.URL + 'vipPlan/getSelectYear',
					method: 'GET',
					data: {
						id: uni.getStorageSync("teacherinfo").id,
					},
					success: (res) => {
						if (res.data.data.data) {
							const dataList = []
							for (const item of res.data.data.data) {
								dataList.push(item)
							}
							this.drugNameColumns[0] = dataList
						} else {
							let currentYear = new Date().getFullYear().toString()
							this.drugNameColumns = [
								[{
									year: currentYear
								}]
							]
						}
					}
				})
			},
			// 选择时间按钮
			drugNameConfirms(e) {
				e.value.forEach((item, index) => {
					if (index >= 0) {
						this.month = item
						this.selectMonth = this.month
						this.selectYear = this.year
						this.getReservation()
					} else {
						let currentYear = new Date().getFullYear().toString()
						this.month = ''
					}
				})
				this.drugNameShows = false
			},
			//时间下拉菜单
			drugNameConfirm(e) {
				e.value.forEach((item, index) => {
					if (index >= 0) {
						this.year = item
						this.selectMonth = this.month
						this.selectYear = this.year
						this.getReservation()
					} else {
						let currentYear = new Date().getFullYear().toString()
						this.year = ''
					}
				})
				this.drugNameShow = false
			},
			// 点击事件
			change1(e) {
				this.selectYear = e
				this.getReservation()
			},
			getReservation() {
				var isComplete = 0
				let currentYear = new Date().getFullYear().toString()
				if (this.selectStatus == 1) {
					isComplete = 1
					this.selectYear = ''
					this.selectMonth = ''
				}
				if (this.selectStatus == 2) {
					isComplete = 0
					this.today = ''
				}
				var ths = this;

				uni.request({
					url: this.URL + 'vipPlan/selectAllPlan',
					method: 'GET',
					data: {
						invitationCode: uni.getStorageSync("teacherinfo").coachCode,
						selectYear: ths.selectYear,
						selectMonth: ths.selectMonth,
						daiXunLianDate: ths.today,
						// ths.selectYear.substring(0, 4)
						isComplete: isComplete
					},
					// userInfo:res.
					success: function(res) {
						if (res.data.code == 200) {
							ths.courseList = res.data.data;
							console.log(ths.courseList)
							// if(isComplete==0 && ths.year === ""){
							// let currentYear = new Date().getFullYear().toString()
							//  ths.year = currentYear
							// }else if(isComplete==0 && ths.year !== ""){

							// }else{
							// 	ths.year = ''
							// }
							// if(isComplete==0 && ths.month === ""){
							//  var currentMonth = new Date().getMonth() + 1;
							//  ths.month = String(currentMonth).padStart(2, "0");
							// }else if(isComplete==0 && ths.month !== ""){

							// }else{
							// 	ths.month = ''
							// }
						} else {
							ths.courseList = []
						}

					},
					fail: function(error) {
						// 处理请求失败
						console.error('角色查询失败,请检查网络');
					}
				})
			},
			openTrain(item) {
				//待上课
				if (item.reservationStatus == 1) {
					uni.navigateTo({
						url: '/pages/train/inProgressReservation?item=' + JSON.stringify(item)
					})
				}
				// if (item.reservationStatus == 2) {
				// 	uni.navigateTo({
				// 		url: '/pages/train/inProgress?item=' + JSON.stringify(item)
				// 	})
				// }
				// 全部完成，查看
				if (item.reservationStatus == 2) {
					uni.navigateTo({
						url: '/pages/train/wancheng?item=' + JSON.stringify(item)

					})
				}
			},
			dialogToggle(type) {

			},
			openReservationpages(item) {
				uni.navigateTo({
					url: '/pages/Reservation/ReservationSetting?item=' + JSON.stringify(item)
				})
			},
			goSearch() {

			}
		}
	}
</script>


<style>
	/* 	.week-item-d1 {
		background-color: #6EE7F0;
		width: 23px;
		height: 23px;
		margin: 0 auto;
		border: #92A3FD;
		border-radius: 50%;
		margin-top: 1vh;
		font-size: 28rpx;
		padding-top: 2px;
		box-sizing: border-box;
		padding-right: 3rpx;
	} */
	.week-item-d1 {
		/* background-color: #6EE7F0; */
		width: 23px;
		height: 23px;
		margin: 0 auto;
		border: #92A3FD;
		border-radius: 50%;
		margin-top: 1vh;
		font-size: 28rpx;
		padding-top: 2px;
		box-sizing: border-box;
		padding-right: 3rpx;
		position: relative;
	}

	/* 底部橙点 */
	.selected-dot {
		border-radius: 25rpx 25rpx 25rpx 25rpx;
		position: absolute;
		bottom: -5px;
		/* 调整打点位置 */
		left: 50%;
		/* 将打点放置在日期中间位置 */
		transform: translateX(-50%);
		/* 居中显示 */
		width: 16px;
		height: 3px;
		background-color: #FF9233;
		/* 选中状态的颜色 */
		/* border-radius: 50%; */
	}

	/* 红点 */
	.selected-dot2 {
		position: relative;
		/* bottom: -5px; /* 调整打点位置 */
		left: 50%;
		/* 将打点放置在日期中间位置 */
		transform: translateX(-50%);
		/* 居中显示 */
		width: 4px;
		height: 4px;
		background-color: #ff0000;
		/* 选中状态的颜色 */
		border-radius: 50%;
		margin-top: 0.5vh;
	}
	/* 蓝点 */
	.selected-dot3 {
		position: relative;
		/* bottom: -5px; /* 调整打点位置 */
		left: 50%;
		/* 将打点放置在日期中间位置 */
		transform: translateX(-50%);
		/* 居中显示 */
		width: 4px;
		height: 4px;
		background-color: #2A82E4;
		/* 选中状态的颜色 */
		border-radius: 50%;
		margin-top: 0.5vh;
	}
	.div2 {
		width: 100%;
		height: 5vh;
	}

	.div2-2 {
		background-color: #fff;
		border-radius: 20px 20px;
		height: 70rpx;
		width: 60%;
		margin: 0 auto;
	}

	/* ::v-deep .div2-2 .input-placeholder {
    color: #FFF;
} */
	.week-display {
		display: flex;
		justify-content: space-between;
		color: #fff;
		width: 90%;
		height: 8vh;
		margin: 0 auto;
	}

	.week-item {
		flex: 1;
		text-align: center;
	}

	.back {
		position: relative;
		width: 100%;
		height: 100vh;
		overflow: hidden;
		/* 超出部分隐藏，可根据需求调整 */
	}

	.back::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #EDF5F7;
		z-index: -1;
	}

	.homeclick {
		height: 70rpx;
		width: 70rpx;
		margin-top: 20rpx;
	}

	.dao {
		float: left;
		width: 20%;
		margin: 0 auto;
		margin: 12%;
		margin-top: 20rpx;
		height: 45rpx;
		font-size: 25rpx;
	}

	.dao-1 {
		float: left;
		width: 20%;
		margin: 0 auto;
		margin: 3.5%;
		height: 50rpx;
		font-size: 25rpx;
		text-align: center;
	}

	.dao-1-1 {
		width: 90%;
		margin: 0 auto;
		height: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.dao-2 {
		position: relative;
		width: 100%;
		margin: 0 auto;
		height: 45rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: white;
	}

	.dao-3 {
		width: 100%;
		margin: 0 auto;
		height: 45rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.xian {
		width: 82rpx;
		height: 10rpx;
		background-color: #fff;
		border-radius: 20%;
		position: absolute;
		bottom: -20rpx;
		left: 32rpx;
	}

	.imagg {
		width: 140rpx;
		height: 140rpx;
		border-radius: 4px;
	}

	.btn-info1 {
		width: 40%;
		height: 50rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		border: solid #f0f0f0 1px;
		border-radius: 12rpx;
	}

	.refresh-icon {
		margin-top: 15px;
		float: left;
		width: 30px;
		height: 30px;
		border-radius: 50%;
		text-align: center;
		line-height: 30px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.icon-refresh {
		font-size: 16px;
	}

	.week-item {
		flex: 1;
		text-align: center;
	}
</style>